<template>
  <input type="checkbox" v-model="state" />全选/反选
  <div class="cbitem" v-for="item of carts" :key="item.name">
    <input type="checkbox" v-model="item.state" />{{ item.name }}
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
const carts = ref([
  { state: true, name: 'html' },
  { state: true, name: 'css' },
  { state: false, name: 'js' },
  { state: true, name: 'vue' },
])
// 计算属性(全选/反选)
const state = computed({
  get() {
    // 只要所有项都为true，返回true
    return carts.value.every((item) => item.state)
  },
  set(val) {
    // 设置所有项的state为val（true或false）
    carts.value.forEach((item) => (item.state = val))
  },
})
</script>

<style scoped>
.cbitem {
  margin: 5px 5px;
}
</style>
